<template>
  <page-container
      :show="props.show"
      position="center"
      custom-style="background: transparent;"
      @beforeleave="handleCancel"
  >
    <view class="customer-container">
      <view class="customer-container-body">
        <view class="customer-container-component">
          <CustomerService v-if="props.type === 'customerService'" />
          <BonusRule v-if="props.type === 'bonusRule'" />
          <PointRule v-if="props.type === 'pointRule'" />
          <RewardTypeRule v-if="props.type === 'rewardTypeRule'" />
          <Withdraw v-if="props.type === 'withdraw'" @success="success"/>
        </view>
        <view class="close" @click="handleCancel"> <view class="iconfont icon-close"></view></view>
      </view>
    </view>
  </page-container>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed } from 'vue'
import { useStore } from 'vuex'
import CustomerService from './CustomerService.vue'
import BonusRule from './BonusRule.vue'
import PointRule from './PointRule.vue'
import RewardTypeRule from './RewardTypeRule.vue'
import Withdraw from './Withdraw.vue'

const  props = defineProps({
  type: {
    type: String,
    default: ''
  },
  show: {
    type: Boolean,
    default: false
  },
})
const emits = defineEmits(['cancel', 'success'])
const store = useStore();
const userInfo = computed(()=> {
  return store.getters['user/userInfo']
})
const isLoadedUser = computed(()=> {
  return store.state.user.isLoadedUser
})
const isVip = computed(() => {
  return userInfo.value?.vip === 1
});
function handleCancel() {
  emits('cancel')
}
function success(){
  emits('success')
}
</script>

<style lang="scss">

.customer-container{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  .customer-container-body{
    position: relative;
    .close{
      position: absolute;
      bottom: -128rpx;
      left: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 72rpx;
      height: 72rpx;
      background: #858585;
      border-radius: 50%;
      transform: translateX(-50%);
      .iconfont{
        font-size: 24rpx;
        color: #fff;
      }
    }
  }
}
</style>
